<template>
  <div class="user_list-page flexC">
    <template>
      <span
          style="font-size: 16px;font-weight: 500;white-space: nowrap;margin-left: 15px;margin-top: 20px;margin-bottom: 0px;">参数配置</span>
      <Divider style="margin-top: 10px;margin-bottom: 10px;"/>
      <Collapse simple>
        <Panel name="1">
          钉钉配置
          <div slot="content">

            <Form ref="DingTalkfrom" :model="DingTalkfrom" :label-width="100" :rules="ruleValiinter">
              <div style="display: flex;justify-content: flex-end;">
                <Button type="info" @click="DingTalk('DingTalkfrom')">保存</Button>
              </div>
              <FormItem label="Webhook" style="margin-left: 50px;" prop="webhook">
                <Input v-model="DingTalkfrom.webhook" placeholder="请输入钉钉Webhook" style="width: 700px"></Input>
              </FormItem>

              <FormItem label="secret" style="margin-left: 50px;" prop="secret">
                <Input v-model="DingTalkfrom.secret" placeholder="请输入钉钉secret" style="width: 700px"></Input>
              </FormItem>
            </Form>
          </div>
        </Panel>

        <Panel name="2">
          测试报告
          <div slot="content">

            <Form :model="formItem" :label-width="130">
              <div style="display: flex;justify-content: flex-end;">
                <Button type="info">保存</Button>
              </div>
              <FormItem label="访问地址">
                <Input v-model="formItem.input" placeholder="请输入访问地址" style="width: 700px"></Input>
              </FormItem>

              <FormItem label="发送报告(钉钉)" style="margin-left: 36px;">
                <i-Switch>
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-Switch>
              </FormItem>
            </Form>
          </div>
        </Panel>
      </Collapse>
    </template>
  </div>
</template>

<script>
import {parameter_Create, parameter_List, parameter_put} from '../../api/api'

export default {
  name: "parameter_config",
  created() {
    this.DingTalklist()
  },
  data() {
    return {
      DingTalkfrom: {
        id: '',
        webhook: '',
        secret: '',
        key: 'DingTalk',
        name: '钉钉',
      },
      formItem: {},
      ruleValiinter: {
        webhook: [
          {required: true, message: '请输入webhook', trigger: 'blur'}
        ],
        secret: [
          {required: true, message: '请选择secret', trigger: 'blur'}
        ]
      },
    }
  },

  methods: {
    //钉钉列表
    DingTalklist() {
      parameter_List({'key':'DingTalk'}).then(res =>{
        let data = res.data.data
        let value = JSON.parse(data[0].value)
        this.DingTalkfrom.webhook = value.webhook
        this.DingTalkfrom.secret = value.secret
        this.DingTalkfrom.id = data[0].id
        this.DingTalkfrom.key = data[0].key
        this.DingTalkfrom.name = data[0].name
        console.log(this.DingTalkfrom)
      })
    },
    // 钉钉保存
    DingTalk(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (!this.DingTalkfrom.id) {
            let data = {
              key: this.DingTalkfrom.key,
              name: this.DingTalkfrom.name,
              value: JSON.stringify({'webhook': this.DingTalkfrom.webhook,'secret': this.DingTalkfrom.secret})
            }
            console.log(data)
            parameter_Create(data).then(res => {
              debugger
              console.log(res)
            })
          } else {
            let data = {
              key: this.DingTalkfrom.key,
              name: this.DingTalkfrom.name,
              value: JSON.stringify({'webhook': this.DingTalkfrom.webhook,'secret': this.DingTalkfrom.secret})
            }
            parameter_put(this.DingTalkfrom.id, data).then(res =>{
              this.$Message.success(res.msg)
              this.DingTalklist()
            })
          }
        }
      })

    }
  }
}
</script>

<style scoped>

</style>
